<script setup lang="ts">
import { h ,reactive, ref, watch} from 'vue'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { ContentWrap } from '@/components/ContentWrap'
import { getCourseTree,addCourse} from '@/api/course'
import{ ElUpload,ElButton,ElMessage } from 'element-plus'
import { off } from 'process'
import { useRouter } from 'vue-router'
import { useValidator } from '@/hooks/web/useValidator'
const { required } = useValidator()
const { push } = useRouter()
let treedata=ref('')
getCourseTree().then((res) => {
  treedata.value = res.data
})
//文件上传成功的钩子
const ImagFiles=ref([])
const uploadSuccess=(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles)=>{
    //添加图片信息
    ImagFiles.value.push({"pictureType":2,"url":response.fileUrl,"pictureName":''})
}
//树结构
const props = {
  value: 'id',
  label: 'name',
  children: 'children'
}
const schema = reactive([
  
  {
    field: 'classId',
    label: '课程分类',
    component: 'TreeSelect',
    componentProps:{
        data:treedata,
        props:props
    }
  },{
    field: 'courseName',
    label: '课程名称',
    component: 'Input'
  },{
    field: 'url',
    label: '课程图片',
    component: 'Upload',
    componentProps:{
      slots: {
        default: true,
      },
      action:'/siyun/siyun/SyOperationController/uoloadCourse',
      optionsSlot: true,
      onSuccess:uploadSuccess
    },
  },{
    field: 'courseUrl',
    label: '课程视频',
    component: 'Upload',
    componentProps:{
       slots: {
        default: true
      },
      action:'/siyun/siyun/SyOperationController/uoloadCourse',
      optionsSlot: true
    },
  },{
    field: 'courseIntro',
    label: '课程介绍',
    component: 'Input',
    componentProps:{
      rows: 1,
      type:"textarea"
    }
  },{
    field: 'courseNo',
    label: '课程序号',
    component: 'Input',
  },{
    field: 'coursePrimary',
    label: '关键字',
    component: 'Input'
  },{
    field: 'currentpriceProduct',
    label: '课程售价',
    component: 'Input'
  },{
    field: 'recommend',
    label: '课程推荐',
    component: 'Radio',
    componentProps: {
      options: [
        {
          label: '新品',
          value: '2'
        },
        {
          label: '推荐',
          value: '3'
        },
        {
          label: '其他',
          value: '4'
        }
      ]
    }
  },
])
const { register, elFormRef, methods } = useForm({
    schema
})





//添加课程函数
const onSubmit= async()=>{
  const data = await methods.getFormData();
  for(const img of ImagFiles.value){
    img.pictureName=data.courseName
  }
  data.str=JSON.stringify(ImagFiles.value)
  console.log(data)
  data.userId=1
  data.createId=1
  data.courseCstatus=3
  data.courseStatus=3
  data.url=ImagFiles.value[0].url
  addCourse(data).then((res)=>{
      if(res.data!=0){
        ElMessage.success({
          message:'添加成功'
        })
        push('/techer/course/courselist')
      }
  })
}


const rules = reactive({
  classId: [required()],
  courseName: [required()],
  url: [required()],
  coursePrimary: [required()],
  currentpriceProduct: [required()],
  recommend:[required()]
})

</script>
<template>
  <ContentWrap title="添加课程" message="添加课程">
    <Form :rules="rules" :icCol="false"  @register="register">
      <template #url-default>
          <ElButton type="primary">上传图片</ElButton>
      </template>
      <template #courseUrl-default>
          <ElButton type="primary">上传视频</ElButton>
      </template>
    </Form>
    <ElButton type="primary" @click="onSubmit" >添加</ElButton>
  </ContentWrap>
   
</template>